<template>
  <div class="inventory_search">
    <!-- 库存条件搜索表单 -->
    <el-form :model="inventory">
      <el-row class="search_condition_row1">
        <!-- 库存数量 -->
        <el-col :span="6">
          <el-input placeholder="请输入库存数量" v-model.number="inventory.purchaseNumber" clearable>
            <template slot="prepend">库存数量</template>
          </el-input>
        </el-col>
        <!-- 出库数量 -->
        <el-col :span="6">
          <el-input placeholder="请输入出库数量" v-model.number="inventory.deliverNumber" clearable>
            <template slot="prepend">出库数量</template>
          </el-input>
        </el-col>
      </el-row>
      <el-row class="search_condition_row2">
        <!-- 现有数量 -->
        <el-col :span="6">
          <el-input placeholder="请输入现有数量" v-model.number="inventory.existedNumber" clearable>
            <template slot="prepend">现有数量</template>
          </el-input>
        </el-col>
        <!-- 供应商 -->
        <el-col :span="5">
          <el-select clearable placeholder="请选择供应商" v-model="inventory.supplier">
            <el-option
              v-for="item in supplierDownBox"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <!-- 仓库 -->
        <el-col :span="5">
          <el-select clearable placeholder="请选择仓库" v-model="inventory.warehouse">
            <el-option
              v-for="item in warehouseDownBox"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <!-- 搜索采购订单按钮 -->
        <el-col :span="5">
          <el-button type="primary" icon="el-icon-search" @click="searchInventory">搜索库存</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'inventorySearch',
    data() {
      return {
        /* 库存信息 */
        inventory: {
          supplier: '',
          warehouse: '',
          purchaseNumber: '',
          deliverNumber: '',
          existedNumber: '',
        },

        /* 供应商下拉框数据 */
        supplierDownBox: [],
        /* 仓库下拉框数据 */
        warehouseDownBox: [],
      }
    },
    methods: {
      /* 搜索采购订单事件 */
      searchInventory() {
        this.$bus.$emit('getInventoryPageList',this.inventory)
        this.$bus.$emit('getInventoryTotal')
      },
      /* 获得供应商下拉框数据 */
      async getSupplierData() {
        const { data: res } = await this.$http.get('workbench/supplier/getSupplierData.do')
        if (res.code == '1') {
          this.supplierDownBox = res.others
        } else {
            console.log('获取药品类别下拉框数据失败!')
        }
      },
      /* 获得仓库下拉框数据 */
      async getWarehouseData() {
        const { data: res } = await this.$http.get('workbench/warehouse/getWarehouseData.do')
        if (res.code == '1') {
          this.warehouseDownBox = res.others
        } else {
            console.log('获取药品类别下拉框数据失败!')
        }
      },
    },
    created() {
      this.getSupplierData()
      this.getWarehouseData()
    }
  }

</script>

<style scoped>
  /* 搜索库存表单 */
  .el-form {
    padding: 20px 20px;
  }

  .search_condition_row1 {
    margin-bottom: 20px;
  }

  .search_condition_row2 {
    margin-bottom: 20px;
  }

  .el-input {
    width: 270px;
  }
</style>